<template>
    <div style="margin-top:50px">
        <Row>
            <Col :sm="{span:12,offset:6}" :md="{span:14,offset:5}" :lg="{span:10,offset:7}">
                <div style="padding:20px">
                    <el-card>
                        <div slot="header">
                            <h2>
                            <i class="el-icon-s-custom"></i>
                            {{ title }}</h2>
                        </div>
                        <div>
                            <el-form :rules="rules" label-position="top" ref="reg" status-icon label-width="100px" :model="user" style="text-align:left">
                                <el-form-item label="账号" prop="account">
                                    <el-input v-model="user.account" ></el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="pass">
                                    <el-input v-model="user.pass" type="password"></el-input>
                                </el-form-item>
                                <el-form-item label="确认密码" prop="checkPass">
                                    <el-input v-model="user.checkPass" type="password"></el-input>
                                </el-form-item>
                                <el-form-item label="请输入邮箱" prop="email">
                                    <el-input v-model="user.email" type="email"></el-input>
                                </el-form-item>
                                <el-form-item label="请滑动至最右侧进行验证">
                                    <div class="block" style="padding:0 10px">
                                        <el-slider v-model="user.validation" :show-tooltip="false" input-size="large"></el-slider>
                                    </div>
                                </el-form-item>
                                <el-form-item style="text-align:right">
                                    <el-button  plain size="small" @click="lseutil.goPath()">返回LSE</el-button>
                                    <router-link to="/login">
                                      <el-button  plain size="small">去登录</el-button>
                                    </router-link>
                                    <el-button  plain size="small" @click="reg('reg')">提交</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-card>
                </div>
            </Col>
        </Row>
    </div>
</template>

<script>
export default {
  name: 'Reg',
  data () {
    let checkPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.user.pass) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    let checkEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入邮箱'))
      } else if (!value.match(/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)) {
        callback(new Error('请输入正确的邮箱'))
      } else {
        callback()
      }
    }
    return {
      title: 'LSE-注册',
      user: {
        account: '',
        pass: '',
        checkPass: '',
        email: '',
        validation: 0
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { max: 20, message: '最大不可超过20个字符', trigger: 'blur' }
        ],
        pass: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { max: 20, message: '最大不可超过20个字符', trigger: 'blur' }
        ],
        checkPass: [
          { required: true, trigger: 'blur', validator: checkPass }
        ],
        email: [
          { required: true, trigger: 'blur', validator: checkEmail }
        ]
      }
    }
  },
  methods: {
    reg (formName) {
      this.$refs[formName].validate((value) => {
        if (value && this.user.validation === 100) {
          let load = this.lseutil.loading('正在注册')
          this.lseajax.post(this.lseajax.baseurl + '/users/reg', {
            account: this.user.account,
            pass: this.user.pass,
            email: this.user.email
          }).then((res) => {
            load.close()
            if (res.code === 200) {
              this.lseutil.msg({
                msg: `注册成功, 请牢记账号:${this.user.account} 密码:${this.user.pass}`
              })
              // 存储token
              this.lseajax.storageJson.set(this.lsedata.tokenName, res.data.token.info)
              this.lseutil.goPath()
            } else {
              this.lseutil.msg({
                msg: res.msg
              })
            }
          }).catch(res => {
            load.close()
          })
        } else {
          this.lseutil.msg({
            msg: '请输入账号密码以及拖动验证'
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
